<template>
  <view class="edu-calendar">
    <view class="edu-calendar__header">
      <view class="btn" @click.stop="pre">
        <u-icon name="arrow-left" color="#B7BAC1" :size="28"></u-icon>
      </view>

      <text class="text">{{ (nowDate.year + '年' || '') + (nowDate.month + '月' || '') }}</text>
      <view class="btn" @click.stop="next">
        <u-icon name="arrow-right" color="#B7BAC1" :size="28"></u-icon>
      </view>
      <text class="backtoday" @click="backToday">今天</text>
    </view>
    <view class="edu-calendar__box">
      <view class="edu-calendar__weeks">
        <view class="edu-calendar__weeks-day">
          <text class="text">日</text>
        </view>
        <view class="edu-calendar__weeks-day">
          <text class="text">一</text>
        </view>
        <view class="edu-calendar__weeks-day">
          <text class="text">二</text>
        </view>
        <view class="edu-calendar__weeks-day">
          <text class="text">三</text>
        </view>
        <view class="edu-calendar__weeks-day">
          <text class="text">四</text>
        </view>
        <view class="edu-calendar__weeks-day">
          <text class="text">五</text>
        </view>
        <view class="edu-calendar__weeks-day">
          <text class="text">六</text>
        </view>
      </view>
      <view class="edu-calendar__weeks">
        <view
          class="edu-calendar__weeks-item"
          v-for="(item, index) in weeks"
          :key="index"
          @click="choiceDate(item)"
        >
          <view
            class="edu-calendar-item__weeks-box"
            :class="{
              disable: item.disable,
              checked: calendar.fullDate === item.fullDate,
            }"
          >
            <text class="text">{{ item.isDay ? '今' : item.date }}</text>
            <text v-if="item.count" class="circle"></text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Calendar from './util.js'
export default {
  data() {
    return {
      date: '',
      weeks: [],
      cale: null,
      calendar: {},
      nowDate: '',
    }
  },
  created() {
    this.cale = new Calendar()
    this.init()
    this.handeWeekDataChange()
  },
  methods: {
    /**
     * 初始化日期显示
     */
    init() {
      this.cale.setDate()
      this.nowDate = this.calendar = this.cale.getInfo()
    },
    /**
     * 变化触发
     */
    change() {
      this.setEmit('change')
    },
    /**
     * 派发事件
     * @param {Object} name
     */
    setEmit(name) {
      let { year, month, date, fullDate } = this.calendar
      this.$emit(name, {
        year,
        month,
        date,
        fulldate: fullDate,
      })
    },
    /**
     * 选择天触发
     * @param {Object} weeks
     */
    choiceDate(weeks) {
      if (weeks.disable) return
      if (this.calendar.fullDate === weeks.fullDate) return
      this.calendar = weeks
      this.change()
    },
    /**
     * 回到今天
     */
    backToday() {
      const nowYearMonth = `${this.nowDate.year}-${this.nowDate.month}`
      const date = this.cale.getDate(new Date())
      const todayYearMonth = `${date.year}-${date.month}`
      this.init(date.fullDate)
      if (nowYearMonth !== todayYearMonth) {
        this.handeWeekDataChange()
      }
      this.change()
    },
    /**
     * 上个月
     */
    pre() {
      const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
      this.setDate(preDate)
    },
    /**
     * 下个月
     */
    next() {
      const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
      this.setDate(nextDate)
    },
    /**
     * 设置日期
     * @param {Object} date
     */
    setDate(date) {
      this.cale.setDate(date)
      this.handeWeekDataChange()
      this.nowDate = this.cale.getInfo(date)
    },
    handeWeekDataChange() {
      const curWeek = this.cale.curWeek
      let startdate = curWeek[0].fullDate
      let enddate = curWeek[curWeek.length - 1].fullDate
      this.$edu.api
        .getUserCourseSchedulePeriod({
          startdate: startdate,
          enddate: enddate,
          identity: 'student',
        })
        .then((res) => {
          const { data } = res
          const days = this.getWeekDaysData(data, this.cale.weeks)
          this.weeks = days
        })
    },
    getWeekDaysData(arr1, arr2) {
      return arr1.reduce((pre, cur) => {
        const target = pre.find((e) => e.fullDate === this.$u.timeFormat(cur.timestamp))
        if (target) {
          target.count = cur.count
        } else {
          pre.push(cur)
        }
        return pre
      }, arr2)
    },
  },
}
</script>

<style lang="scss" scoped>
.edu-calendar {
  display: flex;
  flex-direction: column;

  .edu-calendar__header {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100rpx;
    padding: 0 30rpx;
    .btn {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 40rpx;
      height: 40rpx;
    }
    .text {
      font-size: 32rpx;
      font-weight: 600;
      color: #303133;
      line-height: 1;
      margin: 0 20rpx;
    }
    .backtoday {
      margin-left: auto;
    }
  }

  .edu-calendar__weeks {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0px, 1fr));

    .edu-calendar__weeks-day {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100rpx;
      .text {
        font-size: 28rpx;
        color: #b7bac1;
      }
    }

    .edu-calendar__weeks-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100rpx;

      .edu-calendar-item__weeks-box {
        width: 44rpx;
        height: 44rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 100rpx;
        position: relative;
        .text {
          font-size: 28rpx;
          color: #303133;
        }
        .circle {
          width: 8rpx;
          height: 8rpx;
          border-radius: 8rpx;
          position: absolute;
          top: 50rpx;
          @include bg-color();
        }
        &.disable .text {
          color: #b7bac1;
        }
        &.checked {
          @include bg-color();
          .text {
            color: #ffffff;
          }
        }
      }
    }
  }
}
</style>
